<template>
  <div>
    <div class="al-box-shadow-radius al-m-top-20px al-p-10px al-hover-shadow"
         v-for="(item, index) in this.works.list" :key="index">
      <!--显示作品信息-->
      <div class="al-cursor-pointer"
           @click="goPage('/works/detail/' + item.id)">
        <AvatarNickname

                :avatar="item.tuser.avatar"
                :nickname="item.tuser.nickname"
                :desc="item.tuser.identity"
        />
        <el-divider class="al-m-top--20px"></el-divider>
        <div class="item_info">
          <div>
            {{item.introduction}}
          </div>

          <div class=" al-m-top-20px">
            <DisplayGridImage :data-source="item.images"/>
            <!--                                <el-image v-for="(img, index_img) in item.images" :src="img" />-->
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {request} from "../../../util/network/request";
  import {WORKS_GET_ALL_USER_PAGINATION} from "../../../util/network/api/works/api-works";
  import AvatarNickname from "../../../components/public/AvatarNickname";
  import DisplayGridImage from "../../../components/public/DisplayGridImage";

  export default {
    name: "WorksIndexComponent",
    //组件
    components: {DisplayGridImage, AvatarNickname},
    //属性
    props: {},

    //数据
    data() {
      return {
        works: []
      }
    },

    //挂载完成时
    mounted() {
      //作品展示
      this.getAllWorks();
    },

    //方法
    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },

      getAllWorks(pageNum = 1, pageSize = 3) {
        request({
          url: WORKS_GET_ALL_USER_PAGINATION + `?pageNum=${pageNum}&pageSize=${pageSize}`,
          method: 'get',
          data: {},
          headers: {}
        }).then(res => {
          // console.log(res);
          this.works = res.data.data;
        }).catch(err => {
          console.log(err)
        })
      }
    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>

</style>
